<template>
    <div>
      <!-- :style="{cssPropertyName: cssPropertyValue}" -->
      <!-- 1.基本用法 -->
      <div :style="{ color: finalColor, 'font-size': '16px' }">v-bind绑定style-对象语法</div>
      <div :style="{ color: finalColor, fontSize: '16px' }">v-bind绑定style-对象语法</div>
      <div :style="{ color: finalColor, fontSize: finalFontSize + 'px' }">
        v-bind绑定style-对象语法
      </div>
  
      <!-- 2.绑定一个data中的属性值, 并且是一个对象 -->
      <div :style="finalStyleObj">绑定一个data中的属性</div>
      <!-- 3.绑定调用methods方法返回的对象 -->
      <div :style="getFinalStyleObj()">methods方法返回的对象</div>
      <hr />
      <h2>v-bind绑定style-数组语法</h2>
      <div :style="[{ color: 'green', fontSize: '15px' }]">v-bind绑定style-数组语法</div>
  
      <div :style="[style1Obj, style2Obj]">v-bind绑定style-数组语法</div>
    </div>
  </template>
  
  <!-- <script>
  export default {
    name: 'vbindstyle',
    data() {
      return {
        finalColor: 'red',
        finalFontSize: 16,
        finalStyleObj: {
          'font-size': '14px',
          'font-weight': 900,
          backgroundColor: '#ddd'
        },
        style1Obj: {
          color: 'red',
          fontSize: '16px'
        },
        style2Obj: {
          textDecoration: 'underline'
        }
      }
    },
    methods: {
      getFinalStyleObj() {
        return {
          'font-size': '16px',
          fontWeight: 700,
          backgroundColor: '#ddd'
        }
      }
    }
  }
  </script> -->
  
  <script setup>
  defineOptions({
    name: 'vbindstyle'
  })
  import { ref, reactive } from 'vue'
  const finalColor = ref('red')
  const finalFontSize = ref(16)
  const finalStyleObj = reactive({
    'font-size': '14px',
    'font-weight': 900,
    backgroundColor: '#ddd'
  })
  
  const style1Obj = reactive({
    color: 'red',
    fontSize: '16px'
  })
  
  const style2Obj = reactive({
    textDecoration: 'underline'
  })
  
  // 方法
  const getFinalStyleObj = () => {
    return {
      'font-size': '16px',
      fontWeight: 700,
      backgroundColor: '#ddd'
    }
  }
  </script>
  
  <style lang="scss" scoped></style>
  